<template>
   <div>
      <!-- 头部组件 -->
      <Tobu></Tobu>
      <router-view/>
      <!-- 登录弹窗 -->
      <Login v-show="isShowLoginModel"></Login>
      <!-- 退出弹窗 -->
      <tclogin v-show="isShowtcloginModel"></tclogin>
      <!-- 内置过渡组件 -->
      <transition name="fade">
         <!-- 提示语 -->
        <Toast v-show="isShowToast"></Toast>
      </transition>

   </div>
</template>
  
<script>
import Tobu from "@/components/Tobu"
import Login from '@/components/Login'
import Toast from '@/components/Toast'
import tclogin from '@/components/tclogin'
import { mapState } from 'vuex';
  
export default {
    // eslint-disable-next-line vue/multi-word-component-names
    name: 'zhuzj',
    components: { Tobu, Login, Toast, tclogin },
    data () {
      return {
      }
    },  
    computed: {
      ...mapState({
         isShowLoginModel: state => state.login.isShowLoginModel,
         isShowtcloginModel: state => state.tclogin.isShowtcloginModel,
         isShowToast:state => state.logintoast.isShowToast  
      })
    }, 
    created() {
   
    }
}
</script>
  
<!-- Add "scoped" attribute to limit CSS to this component only -->
<style scoped>
/* 进场时候过渡的开始状态 == 离开时候过渡的结束状态 */
.fade-enter, .fade-leave-to{
  opacity:0
}
/* 指定过渡的属性和时间 */
.fade-enter-active, .fade-leave-active{
  transition: opacity .8s;
}
/* 进场时候过渡的结束状态 == 离开时候过渡的开始状态 */
.fade-enter-to, .fade-leave{
  opacity:1
}  
</style>
  